<template>
	<view>
		<scroll-view scroll-y="true" class="con" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<luomiao-qushuiying
				v-if="bgImage"
				ref="qushuiyingCmp"
				:lineWidth="lineWidth"
				:containerHeight="containerHeight"
				uploadImgStyle="width:100rpx"
				:Image="bgImage"
			></luomiao-qushuiying>
			<view class="select-area">
				<view style="width: 100%">
					<slider :value="lineWidth" min="1" max="80" @changing="handleChanging" show-value />
				</view>
				<view>画笔大小({{ lineWidth }})</view>
				<view style="color: #ff9e3d; margin: 16rpx 0">请用画笔抹掉你不想要的内容</view>
				<view class="flex" style="width: 100%">
					<button
						style="background-color: #909399; flex: 1; border: none;
		border-radius: 10rpx;"
						type="primary"
						@click="handleRedo"
						class="btn reset"
					>
						重置
					</button>
					<button style="flex: 4; margin-left: 10rpx;
		border-radius: 10rpx;" type="primary" @click="handlStart" class="btn start">
						开始处理
					</button>
				</view>
			</view>
			<!-- <view v-for="item in 10" :key="item">1</view> -->
		</scroll-view>
	</view>
</template>

<script>
import { upload_file } from '@/src/utils/uni-fetch.js';
import { imageQuShuiYin, quShuiYinQuery } from '@/src/api/huanlian.js';
let timeId;
export default {
	components: {},
	onLoad({ bgImage }) {
		// const platform = getApp().globalData.platform;
		// console.log(platform, '==>platform', bgImage);
		this.bgImage = bgImage;
		uni.onMemoryWarning((res) => {
			console.log(res, '==>res');
		});
	},
	data() {
		return {
			bgImage: null,
			containerHeight: 450,
			isBlock: false,
			lineWidth: 20,
			timeIntverCount: 3,
			platform: getApp().globalData.platform,
		};
	},

	methods: {
		handleChanging({ detail }) {
			this.isBlock = true;
			this.timeId = setTimeout(() => {
				if (this.timeId) clearTimeout(this.timeId);
				this.isBlock = false;
			}, 1500);
			console.log(detail.value);
			this.lineWidth = detail.value;
		},
		handleRedo() {
			this.$refs.qushuiyingCmp.redo();
		},
		handlStart(e) {
			console.log(this.$refs.qushuiyingCmp.saveCanvas);
			this.$refs.qushuiyingCmp
				.saveCanvas(e)
				.then(async ({ maskImg, orgImg }) => {
					this.up_bgimage(orgImg, maskImg);
				})
				.catch((rej) => {
					console.log(rej);
					uni.showToast({
						title: rej,
						icon: 'none',
					});
				});
		},

		async up_bgimage(bgimage_url, mask_url) {
			try {
				let r = await upload_file({
					url: '/huanlian/up_image2/',
					file: {
						name: 'image',
						uri: bgimage_url,
					},
					formData: {
						img_type: 1,
					},
				});
				this.up_mask(mask_url, r.data.id);
			} catch (e) {
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
		async up_mask(mask_url, bgimage_id) {
			if (!mask_url) {
				uni.showToast({
					title: '请涂抹不需要的区域~',
				});
				return;
			}
			try {
				let r = await upload_file({
					url: '/huanlian/up_image2/',
					file: {
						name: 'image',
						uri: mask_url,
					},

					formData: {
						img_type: 1,
					},
				});
				// this.mask_id = r.data.id
				this.qushuiyin(bgimage_id, r.data.id);
			} catch (e) {
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
		async qushuiyin(bgimage_id, mask_id) {
			try {
				let result = await imageQuShuiYin({
					image_id: bgimage_id,
					mask_id: mask_id,
				});
				this.qushuiyin_query(result.data.huanlian_id);
			} catch (e) {
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
		async qushuiyin_query(huanlian_id) {
			let _this = this;
			try {
				let result = await quShuiYinQuery({
					huanlian_id: huanlian_id,
				});
				if (result.data.image_url) {
					uni.redirectTo({
						url: `/src/pages/Ability/Result/Result?result_img=${encodeURIComponent(result.data.image_url)}`,
					});
				} else {
					setTimeout(() => {
						this.qushuiyin_query(huanlian_id);
					}, 1000);
				}
			} catch (e) {
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},

		// 处理水印图片
		handleImageQuShuiYin(image_id, mask_id) {
			imageQuShuiYin({
				image_id,
				mask_id,
			}).then((res) => {
				setTimeout(async () => {
					await this.handleQuShuiYinQuery(res);
				}, 1);
			});
		},
		// 处理查询水印
		async handleQuShuiYinQuery(res) {
			// 三次机会
			this.timeIntverCount--;
			// 三次用完 进入判断
			if (this.timeIntverCount === -1) {
				// 之前有setTimeout 就直接返回
				if (!timeId) {
					// 没有setTimeout 等 5秒再给 3次机会
					timeId = setTimeout(() => {
						clearTimeout(timeId);
						this.timeIntverCount = 3;
					}, 5000);
				}
				uni.showToast({
					title: '网络问题,请等5秒后重试!',
				});
				return;
			}

			let result = await quShuiYinQuery({
				huanlian_id: res.data.huanlian_id,
			});
			if (!result.data.image_url) {
				// 没有返回图片 等1秒调用递归函数
				setTimeout(async () => {
					await this.handleQuShuiYinQuery(res);
					// 纪录间隔时间
				}, 1000);
			} else {
				// 返回图片了 把三次机会再返回给用户
				this.timeIntverCount = 3;
				console.log(result);
			}
		},
		handleResetImg() {
			this.$refs.qushuiyingCmp.resetImg();
		},
		handleModify() {
			this.$refs.qushuiyingCmp.resetImg();
		},
	},
};
</script>
<style lang="scss" scoped>
@import 'ImageQuShuiYin.scss';
</style>
